<script>

import KtTableColumnOfTypeIsImg
  from "/src/components/node-kantboot/components/KtTable/InColumnComponents/KtTableColumnOfTypeIsImg.vue";

export default {
  components: {KtTableColumnOfTypeIsImg},
  props: {
    column: {
      type: Object,
      default: ''
    },
  },
  data() {
    return {
      valueData: null
    }
  },
  methods: {
    change() {
      this.$emit('change', this.valueData);
    },
    // 上传图片
    uploadImg() {


      this.$kt.file.chooseImageOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: this.column?.setting?.groupCode,
          stateSuccess: (res) => {
            this.valueData = res.data.id;
            this.change();
            loading.close();
          },
          stateFail: (res) => {
            loading.close();
            this.$message.error(res.errMsg);
          }
        });
      });
    }
  }
}

</script>

<template>
  <!--  现阶段只有id类型文件  -->
  <div
      class="img-box">
    <kt-table-column-of-type-is-img
        v-if="valueData"
        :value="valueData"
        :column="column"
    ></kt-table-column-of-type-is-img>
    <div v-if="!valueData"
         @click="uploadImg"
         class="img-box-bottom">上传图片
    </div>
    <div v-if="valueData"
         @click="uploadImg"
         class="img-box-bottom">修改图片
    </div>
  </div>
</template>

<style lang="scss" scoped>
.img-box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f5f7fa;
  cursor: pointer;

  .img-box-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 26px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 26px;
    font-size: 10px;
    letter-spacing: 1px;
  }
}

.img-box-bottom:hover {
  font-weight: bold;
}

.img-box-bottom:active {
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.8);
}
</style>